<template>
  <div id="container">
    <div id="_top">查询</div>
    <div id="_bottom">
      <span>搜索</span>
      <el-input
        type="input"
        placeholder="请输入内容"
        v-model="input"
        size="small"
        style="width: 20rem; margin-right: 3rem"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="editPack"
        >搜索</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    // 搜索套餐
    async editPack() {
      // console.log(this.input);
      const { data: res } = await this.axios.post("/promo/listname", {
        name: this.input,
      });
      // 遍历数组修改数据
      res.data.forEach((item) => {
        // 修改促销状态
        let nowTime = new Date().getTime();
        if (item.end - nowTime > 0 && item.state == "正常") {
          item.state = "正常";
        } else if (item.end - nowTime > 0 && item.state == "暂停促销") {
          item.state = "暂停促销";
        } else if (item.end - nowTime < 0) {
          item.state = "促销结束";
        }
        // 将时间戳转换为本地时间
        let start = this.timeTransfer(item.start);
        let end = this.timeTransfer(item.end);
        let discount = this.timeTransfer(item.discount);
        item.start = start;
        item.end = end;
        item.discount = discount;
      });
      this.$emit("searchData", res);
    },

    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }

      return year + "-" + month + "-" + date + " " + hours + ":" + minute;
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  font-size: 2rem;
  border: 2px solid lightgray;
  margin: 0 auto;
  box-sizing: border-box;
}

#_top {
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: lightgray;
  // border: 1px solid black;
  padding: 1.5rem;
}

#_bottom {
  background-color: #fff;
  font-size: 1.5rem;
  line-height: 5rem;
  padding: 2.5rem;
  height: 5rem;
  & > span {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
</style>